<template>
	<view class="home">
		<view class="top">
			<view class="box" @click="goLogin" v-if="!isLogin">
				<image class="user_photo" mode="widthFix" src="../../static/assets/photo1.jpeg" alt="" />
				<text class="user_name">登录/注册</text>
				<image class="right" mode="widthFix" src="../../static/assets/right.png" alt="" />
			</view>
			<view class="box" v-else>
				<image class="user_photo" mode="widthFix" :src="user_img" alt="" />
				<text class="user_name">{{user_name}}</text>
				<image class="right" mode="widthFix" src="../../static/assets/right.png" alt="" />
				<text class="back" @click="backFn">退出登录</text>
			</view>
		</view>
		<view class="bottom">
			<view class="box" @click="FindAccountFn">
				<text>个人资料</text>
			</view>
			<view class="box" @click="goCollect">
				<text>我的收藏</text>
			</view>
			<view class="box" @click="goOrders">
				<text>我的订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { myFn,findAccountFn } from '../../api/index.js'
	export default {
		data() {
			return {
				isLogin: false,
				token:"",
				user_name:"",
				user_img:"",
				vip:""
			}
		},
		onLoad(options){
			this.isLoginFn();
			this.MyFn();
		},
		onShow(){
			this.isLoginFn();
			this.MyFn();
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			isLoginFn(){
				// let _this = this;
				// uni.getStorage({
				// 	key: 'token',
				// 	success: function (res) {
				// 		console.log(res.data);
				// 		if(res.data != ''){
				// 			_this.isLogin = true;
				// 			console.log(_this.isLogin);
				// 			_this.token = res.data;
				// 		}
				// 		else{
				// 			_this.isLogin = false;
				// 		}
				// 	}
				// });
				this.token = uni.getStorageSync('token');
				if(this.token != ''){
					this.isLogin = true;
					// console.log(this.isLogin);
				}
				else{
					this.isLogin = false;
				}
			},
			async MyFn(){
				await myFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token
				})
				.then(
					content=>{
						// console.log(content);
						let {code,msg,result} = content;
						if(code == 'A001'){
							this.user_name = result[0].nickName;
							this.user_img = result[0].userImg;
							this.vip = result[0].vip;
						}
						else{
							this.isLogin = false;
						}
					}
				)
			},
			backFn(){
				uni.removeStorage({
					key: 'token',
					success: function (res) {
						// console.log('success');
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				});
			},
			goCollect(){
				uni.navigateTo({
					url:'/pages/collect/collect'
				})
			},
			async FindAccountFn(){
				await findAccountFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token
				})
				.then(
					content=>{
						// console.log(content);
						let {code,result} = content;
						if(code == 'B001'){
							let list = JSON.stringify(result);
							console.log(list);
							uni.navigateTo({
								url:'/pages/findAccount/findAccount?list='+list
							})
						}
						
					}
				)
			},
			goOrders(){
				uni.navigateTo({
					url:'/pages/orders/orders'
				})
			}
		}
	}
</script>

<style lang="scss">
	.home{
		.top{
			width: 100%;
			height: 400rpx;
			background: linear-gradient(#3d88f7, #9cd8fc);
			position: relative;
			.box{
				position: absolute;
				top: 150rpx;
				display: flex;
				align-items: center;
				.user_photo{
					width: 150rpx;
					border-radius: 50%;
					margin-left: 50rpx;
				}
				.user_name{
					font-size: 40rpx;
					color: #fff;
					margin-left: 50rpx;
				}
				.right{
					width: 40rpx;
					margin-left: 20rpx;
				}
				.back{
					position: absolute;
					right: -200rpx;
					color: #fff;
				}
			}
		}
		.bottom{
			margin-top: 50rpx;
			.box{
				width: 100%;
				padding: 20rpx;
				background-color: #ccc;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
